<!-- FOOTER START -->
            <div class="footer">
                <div class="contain">
                    <div class="col">
                        <h1>Company</h1>
                        <ul>
                          <li>About</li>
                          <li>Mission</li>
                          <li>Services</li>
                          <li>Social</li>
                          <li>Get in touch</li>
                        </ul>
                    </div>
                    <div class="col">
                        <h1>Products</h1>
                        <ul>
                          <li>About</li>
                          <li>Mission</li>
                          <li>Services</li>
                          <li>Social</li>
                          <li>Get in touch</li>
                        </ul>
                    </div>
                    <div class="col">
                        <h1>Accounts</h1>
                        <ul>
                          <li>About</li>
                          <li>Mission</li>
                          <li>Services</li>
                          <li>Social</li>
                          <li>Get in touch</li>
                        </ul>
                    </div>
                    <div class="col">
                        <h1>Resources</h1>
                        <ul>
                          <li>Webmail/Email</li>
                          <li>Redeem code</li>
                          <li>WHOIS lookup</li>
                          <li>Site map</li>
                          <li>Web templates</li>
                        </ul>
                    </div>
                    <div class="col">
                        <h1>Support</h1>
                        <ul>
                          <li>Contact us</li>
                          <li>Web chat</li>
                          <li>Open ticket</li>
                          <li>Whatsapp</li>
                          <li>Wechat</li>
                        </ul>
                    </div>
                    <div class="col social">
                        <h1>Social</h1>
                        <ul>
                          <li><img src="../images/facebook.png" width="32" style="width: 32px;"></li>
                          <li><img src="../images/insta.png" width="32" style="width: 32px;"></li>
                          <li><img src="../images/twitter.png" width="32" style="width: 32px;"></li>
                        </ul>
                    </div>
              </div>
            </div>
            <!-- END OF FOOTER -->
            <style>
                .main_page {height: 15vw; width: 96vw; text-align: center; box-sizing: border-box; padding: 3vw 0vw;background-image: repeating-linear-gradient(95deg, darkgrey, yellow, red);}
                /* footer formatting*/
                .footer {width: 96vw; position: absolute; height: 20vw; background-image: repeating-linear-gradient(65deg, gainsboro , gray, darkgray);}
                .footer .col {width: 15vw; height: auto; float: left; padding-left: 3vw; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
                  padding: 0vw 2vw 2vw 2vw;}
                .footer .col h1 {margin: 0;padding: 0; font-family: inherit; font-size: 1vw; line-height: 1.25vw; padding: 2vw 0vw 0.5vw 0vw; color: darkblue; font-weight: bold; 
                  text-transform: uppercase; letter-spacing: 0.250vw;}
                .footer .col ul {list-style-type: none; margin: 0; padding: 0;}
                .footer .col ul li {color: darkred; font-size: 0.9vw; font-family: inherit; font-weight: bold; padding: .5vw 0vw .5vw 0vw; cursor: pointer; transition: .2s; -webkit-transition: .2s; 
                  -moz-transition: .2s;}
                .social ul li {display: inline-block; padding-right: 0.5vw !important;}
                .footer .col ul li:hover {color: lightgrey; transition: .1s; -webkit-transition: .1s; -moz-transition: .1s;}
                        
                @media only screen and (min-width: 1280px) {
                .contain {margin: 2vw auto; padding-left: 3vw;}
                }
                @media only screen and (max-width: 1139px) {
                .contain .social {width: 1000px; display: block;}
                .social h1 { margin: 0px; }
                }
                @media only screen and (max-width: 950px) {
                .footer .col {width: 33%;}
                .footer .col h1 {font-size: 14px;}
                .footer .col ul li {font-size: 13px;}
                }
                @media only screen and (max-width: 500px) {
                    .footer .col {width: 50%;}
                    .footer .col h1 {font-size: 14px;}
                    .footer .col ul li {font-size: 13px;}
                }
                @media only screen and (max-width: 340px) {
                .footer .col {width: 100%;}
                }
            </style>